<!-- 
 @Author: LW   
 @Date: 2020-12-10 09:05:28   
 @function: 主页左侧菜单主键
 -->
<template>
  <div class="sidenav">
    <el-menu
      :default-active="defaultUrl"
      class="el-menu-vertical-demo"
      text-color="#000;"
      active-text-color="#000"
      :unique-opened="true"
      @select="handleSelect"
      :collapse="isCollapse"
    >
      <template v-for="menu in menuList">
        <el-menu-item
          :key="menu.id"
          :index="menu.link_url"
          v-if="menu.link_url != '' && menu.link_url != '/' "
        >
          <i class="iconfont" :class="menu.icon_font"></i>
          <span slot="title">{{ menu.name }}</span>
        </el-menu-item>
        <el-submenu :index="menu.id" :key="menu.id" popper-class="backblue" v-else>
          <template slot="title">
            <i class="iconfont" :class="menu.icon_font"></i>
            <span slot="title">{{ menu.name }}</span>
          </template>
          <el-menu-item
            :index="item.link_url"
            :key="item.id"
            v-for="item in menu.children"
          >{{ item.name }}</el-menu-item>
        </el-submenu>
      </template>
    </el-menu>
  </div>
</template>
<script>

//引用home界面相关的api[顶部导航/个人信息放在里面，如果不再拆分，个人信息/密码修改也放里面]
import HomeHttp from "@/api/home/index";
const {loadSubMenu } = HomeHttp;

import DynamicRoutes from "@/utils/dynamicRoutes";
const { mergeRoutes } = DynamicRoutes;

export default {
  props: ["isCollapse"],
  data() {
    return {
      menuList: null, //菜单信息
      defaultUrl: ""
    };
  },
  computed: {
    onRoutes() {
      //当前激活菜单的 index
      return this.$route.path;
    }
  },
  //html加载完成后执行。执行顺序：子组件-父组件
  //页面初始化方法
  mounted() {},
  methods: {
    //选着行事件
    handleSelect(key, keyPath) {
      this.$router.push(key);
    },
    //获取菜单
    loadSubMenu(topMenuID) {
      let self = this;
      let jsonPar = {
        appSecret: this.$store.getters.appSecret,
        parentId:topMenuID
      };
      loadSubMenu(jsonPar).then(response => {
        let data = response.data;
        if (data.Code === 1000) {
          this.menuList = data.Data;
          let firstlinkUrl = "";
          data.Data.forEach(element => {
            if (element.link_url != "" && firstlinkUrl == "") {
              firstlinkUrl = element.link_url;
              return false;
            } else {
              if (element.children.length > 0) {
                element.children.forEach(childElement => {
                  if (childElement.link_url !== "" && firstlinkUrl == "") {
                    firstlinkUrl = childElement.link_url;
                    return false;
                  }
                });
              }
            }
          });
          if (firstlinkUrl !== "") {
            this.defaultUrl = firstlinkUrl;
            this.$router.push(firstlinkUrl);
          }
        } else {
          this.$messageTip.warning(data.Msg); 
        }
      });
    }
  }
};
</script>
 <style lang="scss" scoped>
@import "../../../assets/css/home/components/navgation.scss";
</style>
 <style>
@import "../../../assets/css/home/components/navgation.cover.scss";
</style>